<template>
  <div class="app">
    <van-nav-bar title="分类" placeholder fixed />

    <van-row>
      <van-col span="5" class="sidebar">
        <!-- 侧边导航 -->
        <van-sidebar v-model="active" class="left-content">
          <van-sidebar-item
            :title="item.name"
            v-for="item in categorieList"
            :key="item.id"
            @click="getCategorieProList(item.id)"
          />
        </van-sidebar>
      </van-col>
      <van-col span="19" class="pros">
        <!-- 右侧商品 -->
        <!-- <div class="right-content">    -->
        <van-list
          :immediate-check="false"
          offset="0"
          class="right-content"
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <van-card
            @click="onProductClick(item.id)"
            v-for="item in categorieProList"
            :key="item.id"
            :price="item.price"
            :desc="item.desc"
            :title="item.name"
            :thumb="item.coverImage"
          />
        </van-list>
        <!-- </div> -->
      </van-col>
    </van-row>
  </div>
</template>

<script setup>
let active = ref(0)
import { getProductCategoriesReq, getProductCategorySeachReq } from '@/api/Produc'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
//获取分类种类列表
let categorieList = ref([])
function getCategorieList() {
  getProductCategoriesReq().then((res) => {
    // console.log(res.data)
    categorieList.value = res.data.data
    //初始化分类商品列表
    getCategorieProList()
  })
}
getCategorieList()

let Categorieid = 1
//获取分类商品列表
let categorieProList = ref([])
let total = ref(0)
//初始化商品列表 id = 5 为默认值 5有问题
function getCategorieProList(id = 1) {
  // console.log(id, '点击了分类');

  Categorieid = id
  loading.value = false
  finished.value = false

  getProductCategorySeachReq(id).then((res) => {
    // console.log('请求分类商品列表', res.data);

    total.value = res.data.total
    categorieProList.value = res.data.data
  })
}
//点击商品
let router = useRouter()
function onProductClick(id) {
  // console.log(id, '点击了商品')
  router.push('/detail?id=' + id)
}

//加载更多
let loading = ref(false)
let finished = ref(false)
let per = 10

// 加载更多
async function onLoad() {
  per += 10
  let res = await getProductCategorySeachReq(Categorieid, 1, per)
  categorieProList.value = res.data.data
  // 加载状态结束
  loading.value = false
  // 数据全部加载完成
  if (categorieProList.value.length >= total.value) {
    finished.value = true
  }
}
</script>

<style scoped lang="scss">
.left-content {
  height: calc(100vh - 96px);
}
.right-content {
  overflow: auto;
  height: calc(100vh - 96px);
}
</style>
